<template>
	<view class="all">
		<view class="bg"></view>
		<view class="mess">
			<view class="messItem1">
				<view>头像</view>
				<view>
					<image src="/static/05refuel/background@3x.png" mode="" class="image1"></image>
					<image src="/static/08my/arrow@3x.png" mode="" class="image2" @click="toupdateMess"></image>
				</view>
			</view>
			<view class="messItem2">
				<view>姓名</view>
				<view>张先生</view>
			</view>
			<view class="messItem3" @click="toupdatePhone">
				<view>电话</view>
				<view>186347923748</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
		
	const toupdateMess=()=>{
		uni.navigateTo({
			url: '/pages/my/myDetail/updateMess/updateMess',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
	const toupdatePhone=()=>{
		uni.navigateTo({
			url: '/pages/my/myDetail/updatePhone/updatePhone',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
	
</script>

<style scoped>
	.all{
		padding-top: 10rpx;
		box-sizing: border-box; 
		position: relative;
		z-index: 1;
	}
	.bg{
		background-color: #0472fe;
		width: 100%;
		height: 300rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
	}
	.mess{
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		padding: 30rpx;
		
	}	
	.messItem1,.messItem2,.messItem3{
		display: flex;
		justify-content: space-between;
	}
	.messItem1{
		line-height: 100rpx;
	}
	.messItem2{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		border-top: 1rpx solid #eee;
		
	}
	.messItem3{
		padding: 20rpx 0;
		
	}
	.image1{
		height: 100rpx;
		width: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.image2{
		height: 30rpx;
		width: 20rpx;
		margin: 35rpx 0;
	}
</style>
